import React from 'react'

/* 
需求：
    http://localhost:3000
    http://localhost:3000------------->首页
    http://localhost:3000/goodsList------------->商品列表
    http://localhost:3000/newsList------------->新闻列表
    http://localhost:3000/my------------->个人中心
    http://localhost:3000/aslkdjf;lsakdjf;lsakdf------------->404,您查看的界面不存在……
    http://localhost:3000/home------------->首页(重定向)
 */
// 路由的流程：1- 确定路由模式  2- 指定路由所在的位置（路由需要放置到路由器中）
// 注意1：地址是不区分大小写（对大小写不敏感）
// 注意2：*代表的是：如果其它路由的地址不满足，那么会渲染path为*的路由
//       *可以写在Routes下的任意位置
//       如果出现两个相同的路由地址，只有第一个会渲染。
// 注意3：路由(Route)必须被Routes直接包裹。
// 注意4：Routes必须被Router所包裹，可以直接包裹也可以间接包裹。

import {
    BrowserRouter as Router, //指定路由模式为history
    Route,//路由,必须直接被Routes所包裹
    Routes,// 包裹路由
    Navigate
} from "react-router-dom";
import Home from './pages/Home';
import GoodsList from './pages/GoodsList';
import NewsList from './pages/NewsList';
import My from './pages/My';
import NotFound from './pages/NotFound';

export default function App() {
  return (
      <div>
          <Router>
              <div>
                  <Routes>
                      <Route path={'/'} element={<Home/>}></Route>
                      <Route path={'*'} element={<NotFound/>}></Route>
                      <Route path={'goodsList'} element={<GoodsList/>}></Route>
                      <Route path={'newsList'} element={<NewsList/>}></Route>
                      <Route path={'my'} element={<My/>}></Route>
                       {/*重定向：当地址为/home,跳转至路由地址为/的路由中*/}
                      <Route path={'/home'} element={<Navigate to={'/'} />}></Route>
                  </Routes>
              </div>
          </Router>
    </div>
  )
}
